class TurnCard extends HTMLElement {
  constructor() {
    super();

    const template = document.createElement('template');

    template.innerHTML = `
    <style>
      .card-box {
        width: 200px;
        height: 200px;
        /* 景深 */
        perspective: 900px;
      }

      .card {
        height: 100%;
        /* 开启3D */
        transform-style: preserve-3d;
        position: relative;
        transition: all .8s ease;
      }

      .card-box:hover .card {
        transform: rotateY(180deg);
      }

      .card div {
        height: 100%;
        position: absolute;
        border-radius: 30px;
        box-shadow: 1px 1px 10px 0px rgb(14, 13, 13, .3);
        background-color: #fff;
        text-align: center;
        font-family: cursive;
        backface-visibility: hidden;
      }

      .front,
      .back {
        width: 100%;
      }

      /* 正面 */
      .front {
        z-index: 1;
        transform: rotateY(180deg);
      }

      .front p{
        text-align: left;
        text-indent: 2em;
      }

      /* 背面 */
      .back {
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
        z-index: 2;
        transform: rotateY(0deg);
      }
    </style>

    <div class="card-box">
      <div class="card">
        <!-- 背面 -->
        <div class="back"></div>
        <!-- 正面 -->
        <div class="front">
        <!-- 最后就是这里，也要和上面你自定义的变量保持一致 -->
          <h2 class="name"></h2>
          <p>性别：<span class="sex"></span></p>
          <p>年龄：<span class="age"></span></p>
          <p>爱好：<span class="hobby"></span></p>
        </div>
      </div>
    </div>
    `;

    let shadow = this.attachShadow({
      mode: 'closed'
    });

    let content = template.content.cloneNode(true);
    content.querySelector('.front>.name').innerText = this.getAttribute('name');
    content.querySelector('.front>p>.sex').innerText = this.getAttribute('sex');
    content.querySelector('.front>p>.age').innerText = this.getAttribute('age');
    content.querySelector('.front>p>.hobby').innerText = this.getAttribute('hobby');
    shadow.appendChild(content);
  }
}

window.customElements.define('turn-card', TurnCard);